<template>
  <!--外围最大的盒子哦 -->
  <div class="myLogin">
    <div class="homepage">
      <img src="../../assets/启动.png" alt="" v-if="show" />
    </div>
    <div class="mybox" v-if="!show">
      <!-- 表单上的图片区域 -->
      <div class="myimg">
        <img src="../../assets/微信图片_20220826093303.png" alt="" />
      </div>
      <div class="myform">
        <!-- 表单登录框 -->
        <van-form @submit="onSubmit">
          <van-field
            v-model="inif.username"
            placeholder="请输入手机号"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="inif.password"
            type="password"
            placeholder="请输入密码"
            :rules="[{ required: true }]"
          />
          <!-- 用户同意的协议 -->
          <van-radio-group v-model="radio" @change="changeRad">
            <van-radio name="1" @click="radClick('1')"
              >已阅读并同意<span class="son">服务协议</span></van-radio
            >
          </van-radio-group>
          <div style="margin: 16px" class="mysubmit">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              :loading="logShow"
              loading-text="加载中..."
              >登录</van-button
            >
          </div>
          <div class="help">
            <span>新用户注册</span>
            <span class="myspan">|</span>
            <span>忘记密码</span>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
//导入导出框组件
import { Dialog } from "vant";
//导入获取用户token请求
import { getuserApi } from "@/api/user";
export default {
  data() {
    return {
      num: 0, //设置点击后的事件
      logShow: false, //登录按钮加载状态
      radioChange: false, //定义一个状态
      show: true, //改变主页面的图片的显示
      radio: "", //同意用户协议
      inif: {
        username: "user1", //用户名
        password: "111111", //密码
        id: "MultiwayCloud_App",
      },
    };
  },
  methods: {
    // 值改变事件
    changeRad(event) {
      // 当值改变把定义的变量改为true
      this.radioChange = true;
    },
    // 点击事件
    radClick(e) {
      //判断状态是不是为true
      if (!this.radioChange) {
        //把数据清空
        this.radio = "";
      }
      //在把定义的变量改为false
      this.radioChange = false;
    },

    //登录按钮事件
    async onSubmit() {
      this.num++; //把点击数量加加
      //判断如果协议没有勾选
      if (this.radio == "") {
        // 提示用户
        this.$toast.fail("请先勾选协议");
        return; //直接return不执行后面的代码
      }
      this.logShow = true;
      try {
        //点击登录后发送请求获取token
        let res = await getuserApi({
          grant_type: "password",
          username: this.inif.username,
          password: "1q2w3E*",
          client_id: "MultiwayCloud_App",
        });
        setTimeout(() => {
          this.$store.commit("getsave", res.data.access_token);
          this.logShow = false;
          //跳转到首页页面
          this.$router.push("/Layout/home");
          //保存token到定义好的用户名token中
          // 提示用户登录成功
          this.$toast.success("登录成功");
        }, 2000);
      } catch {
        this.logShow = false;
        if (this.num >= 3) {
          Dialog.confirm({
            title: "登录失败",
            cancelButtonText: true,
            cancelButtonText: "找回密码",
            message: "账号或者密码错误,请重新输入。",
            confirmButtonColor: "#2ed5d9",
            cancelButtonColor: "#2ed5d9",
          })
            .then(() => {
              // on confirm
              console.log("确认");
            })
            .catch(() => {
              this.$router.push('/retype')
            });
        } else {
          Dialog.alert({
            title: "登录失败",
            confirmButtonColor: "#2ed5d9",
            message: "账号或者密码错误,请重新输入",
          }).then(() => {
            // on close
          });
        }
      }
    },
  },

  //created钩子函数中调用
  created() {
    setTimeout(() => {
      this.show = false;
    }, 1500);
  },
};
</script>

<style lang="less" scoped>
.myLogin {
  margin: 0;
  padding: 0;
  .homepage {
    width: 374px;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .mybox {
    margin: 160px auto;
    .myimg {
      text-align: center;
      img {
        width: 180px;
        height: 24px;
      }
    }
    .myform {
      margin-top: 20px;
      .van-form {
        .van-field {
          border-radius: 30px;
          margin: 0 auto !important;
          background-color: #efefef;
          width: 314px;
          margin-bottom: 16px !important;
          height: 60px;
          ::v-deep .van-field__control {
            text-align: center !important;
            line-height: 40px;
          }
        }

        .mysubmit {
          margin: 0 auto !important;
          text-align: center;
          margin-top: 140px !important;
          width: 314px;
          .van-button {
            border-radius: 30px;
            height: 60px;
            background-color: #00d1d1;
            border: none;
          }
        }
      }
      .help {
        margin-top: 30px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        .myspan {
          margin: 0 18px;
          color: #c1c1c1;
        }
      }
      ::v-deep .van-radio {
        margin-left: 22% !important;
        .van-radio__label {
          font-size: 18px !important;
        }
        .son {
          color: #4ea7ff;
        }
      }
    }
  }
}
</style>
